<template>
  <div class="app-container">
      <el-row :gutter="24">
          <el-col :span="24" :xs="24">
              <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
                  <el-form-item label="权限名称" prop="entName">
                      <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 240px"
                          maxlength="30" @keyup.enter="handleQuery" />
                  </el-form-item>
                  <el-form-item label="状态" prop="phonenumber">
                      <el-select v-model="form.dept" placeholder="请选择" clearable style="width: 280px"
                          :disabled="dialogType == 3">
                          <el-option label="已通过" value="1" />
                          <el-option label="已拒绝" value="2" />
                      </el-select>
                  </el-form-item>
                  <el-form-item style="margin-left: 40px;">
                      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                      <el-button type="success" icon="Plus" @click="handleAdd">新增申请</el-button>
                  </el-form-item>
              </el-form>

              <el-table v-loading="loading" :data="detectionList"
                  style="margin-top: 30px;margin-left: 20px;margin-right: 20px;width: calc(100% - 40px);">
                  <el-table-column type="index" width="50" label="序号" />
                  <el-table-column label="权限名称" align="center" key="name" prop="name" />
                  <el-table-column label="申请时间" align="center" key="phone" prop="phone" />
                  <el-table-column label="状态" align="center" key="phone" prop="phone" />
                  <el-table-column label="申请描述" align="center" key="phone" prop="phone" />
                  <el-table-column label="说明" align="center" key="phone" prop="phone" />
              </el-table>
              <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                  @pagination="getList" style="margin-right: 20px;" />
          </el-col>
      </el-row>

      <!-- 添加 -->
      <el-dialog v-model="open" width="800px" append-to-body :title="getDialogTitle()">
          <el-form :model="form" :rules="rules" ref="editFormRef" label-width="120px" :validate-on-rule-change='false'>
              <el-form-item label="菜单权限" prop="name">
                  <el-checkbox v-model="form.menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
                  <el-checkbox v-model="form.menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
                  <el-checkbox v-model="form.menuCheckStrictly"
                      @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
                  <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="id"
                      :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
                      :props="{ label: 'label', children: 'children' }"></el-tree>
              </el-form-item>
              <el-form-item label="申请权限" prop="phone">
                  <div></div>
              </el-form-item>
              <el-form-item label="申请描述" prop="phone">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入"></el-input>
              </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="saveForm">添加</el-button>
                  <el-button @click="cancel">取 消</el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>

<script setup name="User">
import { roleMenuTreeselect } from "@/api/system/menu";

const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const open = ref(false);
const total = ref(0);
const dialogType = ref(1)
const menuOptions = ref([]);
const menuRef = ref(null);

const data = reactive({
  form: {},
  queryParams: {
      pageNum: 1,
      pageSize: 10,
  },
  rules: {
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询列表 */
const getList = () => {
  loading.value = true;
  setTimeout(() => {
      loading.value = false;
      detectionList.value = [{
          name: '刘晓敏',
          phone: '18957845242',
          dept: '云岩区检测部',
          address: '贵州省贵阳市云岩区'
      }, {
          name: '李一',
          phone: '13125481221',
          dept: '花溪区检测部',
          address: '贵州省贵阳市花溪区'
      }, {
          name: '赵俊俊',
          phone: '18785062243',
          dept: '白云区检测部',
          address: '贵州省贵阳市白云区'
      }];
      total.value = 3;
  }, 1000);
  // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
  //     loading.value = false;
  //     detectionList.value = res.rows;
  //     total.value = res.total;
  // });
};

getList();

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
};


/** 重置操作表单 */
function reset() {
  form.value = {
      userName: undefined,
      entName: undefined,
      kin: undefined,
      phonenumber: undefined,
      dateRange: []
  };
  proxy.resetForm("userRef");
};
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
};

const saveForm = () => {
  proxy.$refs["editFormRef"].validate(valid => {
      if (valid) {
          proxy.$modal.msgSuccess("操作成功");
          open.value = false;
          detectionList.value.push(form.value)
      }
  });
}


/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value) => {
  let treeList = menuOptions.value;
  for (let i = 0; i < treeList.length; i++) {
      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
  }
}

/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value) => {
  menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value) => {
  form.value.menuCheckStrictly = value ? true : false;
}

const getDialogTitle = (row) => {
  if (dialogType.value == 1) {
      return '新增'
  } else if (dialogType.value == 2) {
      return '编辑'
  }
  return '详情'
}

const openAndClearForm = () => {
  open.value = true
  setTimeout(() => {
      proxy.$refs["editFormRef"].clearValidate();
  }, 300);
}

const handleAdd = (row) => {
  dialogType.value = 1
  rules.value = {}
  getMenuTreeselect();
  openAndClearForm()
}

/** 查询菜单树结构 */
const getMenuTreeselect = (roleId) => {
  return roleMenuTreeselect(roleId).then(response => {
      menuOptions.value = response.menus;
      return response;
  });
}

</script>


<style lang="scss" scoped>
.dialog-item-title {
  color: #000;
  font-size: 17px;
  padding-left: 10px;
  margin: 0 20px;
  border-left: 4px #00BFFF solid;
}

.now-select-txt {
  font-size: 15px;
  color: #fff;
  background: #00BFFF;
  padding: 10px 20px;
  border-radius: 10px 10px 0 0;

  span {
      font-size: 20px;
      font-weight: bold;
      margin: 0 10px;
  }

  div {
      cursor: pointer;
      margin-left: 30px;
      font-weight: bold;
  }
}
</style>